<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>

<body>
    <div borer="1" width="800" align="center">
        <label for="id">
            分类：
            <input type="text" id="id" name="id">
        </label>
        <label for="name">
            分类名称：
            <input type="text" id="name" name="name">
        </label>
        <label for="mag">
            分类描述：
            <input type="text" id="mag" name="mag">
        </label>
        <button id="submit">添加</button>
    </div>


<table id="tab1" border="1" width="800" align="center">
    <tr>
        <th style="text-align: left">
            <input style="background:lightgreen" id="selectAll" type="button" value="全选">
            <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
            <input style="background:lightgreen" id="reverse" type="button" value="反选">
            <INPUT style="background:lightgreen" id="del" type="button" value="全部删除">
        </th>

        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><button onclick="update(this)">修改</button>|<button onclick="delLine(this)">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><button onclick="update(this)">修改</button>|<button onclick="delLine(this)">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><button onclick="update(this)">修改</button>|<button onclick="delLine(this)">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><button onclick="update(this)">修改</button>|<button onclick="delLine(this)">删除</button></td>
    </tr>
</table>
</body>
<script>
    $("#submit").blur(function (){
        let id=$("#id").prop("value");
        let name=$("#name").prop("value");
        let mag=$("#mag").prop("value");
        let line=$(`<tr>
            <td><input type="checkbox" class="item"/></td>
            <td>${id}</td>
            <td>${name}</td>
            <td>${mag}</td>
            <td><button onclick="update(this)">修改</button>|<button onclick="delLine(this)">删除</button></td>
</tr>`);
        $("#tab1").append(line);
    });
    function  delLine(line) {
        $(line).parent().parent().remove();
    }
    
    
    
    /*function updete(line) {
        var siblings=$(line).parent().siblings();
        siblings[0].innerText
*/
        
    }
    
</script>
    


<script src="../jquery-3.3.1.min.js"></script>

<script>
    //全选
    //1. 为全选按钮绑定单击事件
    $("#selectAll").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值为true
        $(".item").prop("checked",true);
    });

    //全不选
    //1. 为全不选按钮绑定单击事件
    $("#selectNone").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值为false
        $(".item").prop("checked",false);
    });

    //反选
    //1. 为反选按钮绑定单击事件
    $("#reverse").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });

    $(".add").click( function (){

    })
</script>

</html>